<template>
  <view class="notes-container">
    <!-- 顶部导航 -->
    <view class="nav-bar">
      <!-- 返回按钮 -->
      <view class="back-btn" @click="goBack">
        <uni-icons type="back" size="20" color="#333"></uni-icons>
      </view>
      
      <view class="search-bar" @click="goSearch">
        <uni-icons type="search" size="16" color="#999"></uni-icons>
        <text class="placeholder">搜索游记/目的地</text>
      </view>
      <view class="publish-btn" @click="startPublish">
        <uni-icons type="plusempty" size="20" color="#1a8cff"></uni-icons>
      </view>
    </view>

    <!-- 分类标签 -->
    <scroll-view scroll-x class="tag-scroll" show-scrollbar="false">
      <view 
        v-for="(tag, index) in tags" 
        :key="tag.id"
        class="tag-item"
        :class="{ active: activeTag === index }"
        @click="changeTag(index)"
      >
        <text>{{ tag.name }}</text>
        <view v-if="activeTag === index" class="indicator"></view>
      </view>
    </scroll-view>

    <!-- 瀑布流内容 -->
    <scroll-view 
      scroll-y 
      class="notes-scroll"
      :style="{ height: scrollHeight }"
      @scrolltolower="loadMore"
    >
      <!-- 置顶游记 -->
      <view v-if="pinnedNotes.length > 0" class="pinned-section">
        <view class="section-header">
          <uni-icons type="flag" size="16" color="#ff4d4f"></uni-icons>
          <text class="section-title">编辑精选</text>
        </view>
        <view class="pinned-list">
          <view 
            v-for="note in pinnedNotes" 
            :key="note.id"
            class="pinned-item"
            @click="viewDetail(note.id)"
          >
            <image class="cover" :src="note.cover" mode="aspectFill"></image>
            <view class="pinned-content">
              <text class="title">{{ note.title }}</text>
              <view class="meta">
                <image class="avatar" :src="note.user.avatar"></image>
                <text class="name">{{ note.user.name }}</text>
                <text class="view-count">{{ note.views }}浏览</text>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 普通游记 -->
      <view class="waterfall">
        <view 
          v-for="(note, index) in notesList" 
          :key="note.id"
          class="note-item"
          :style="{ width: index % 3 === 0 ? '100%' : '48%' }"
          @click="viewDetail(note.id)"
        >
          <image class="cover" :src="note.cover" mode="aspectFill"></image>
          <view class="note-content">
            <text class="title">{{ note.title }}</text>
            <view class="stats">
              <view class="stat-item">
                <uni-icons type="heart" size="12" color="#999"></uni-icons>
                <text>{{ note.likes }}</text>
              </view>
              <view class="stat-item">
                <uni-icons type="chat" size="12" color="#999"></uni-icons>
                <text>{{ note.comments }}</text>
              </view>
            </view>
            <view class="user-info">
              <image class="avatar" :src="note.user.avatar"></image>
              <text class="name">{{ note.user.name }}</text>
              <text class="date">{{ note.date }}</text>
            </view>
          </view>
          <view class="tag-list">
            <text 
              v-for="tag in note.tags" 
              :key="tag"
              class="tag"
              :style="{ 
                backgroundColor: getTagColor(tag),
                color: getTagTextColor(tag)
              }"
            >
              {{ tag }}
            </text>
          </view>
        </view>
      </view>

      <uni-load-more 
        :status="loadingStatus" 
        :icon-size="16"
        color="#999"
      ></uni-load-more>
    </scroll-view>

    <!-- 发布按钮（移动端适配） -->
    <view class="float-btn" @click="startPublish">
      <uni-icons type="plusempty" size="24" color="#fff"></uni-icons>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { onLoad } from '@dcloudio/uni-app'

// 设计色调配置
const primaryColor = '#1a8cff'
const activeColor = '#1a8cff'
const warningColor = '#ff4d4f'

// 响应式数据
const scrollHeight = ref('')
const activeTag = ref(0)
const loadingStatus = ref('more')

const tags = ref([
  { id: 1, name: '推荐' },
  { id: 2, name: '最新' },
  { id: 3, name: '热门' },
  { id: 4, name: '摄影' },
  { id: 5, name: '攻略' },
  { id: 6, name: '亲子' },
  { id: 7, name: '穷游' }
])

const pinnedNotes = ref([
  {
    id: 1,
    title: '三亚5天4晚亲子游超全攻略',
    cover: '/static/pinned1.jpg',
    views: 12543,
    user: {
      id: 101,
      name: '旅行妈妈',
      avatar: '/static/avatar2.jpg'
    }
  }
])

const notesList = ref([
  {
    id: 2,
    title: '故宫隐藏机位大公开',
    cover: '/static/find/gugong.webp',
    likes: 342,
    comments: 56,
    date: '03-15',
    tags: ['摄影', '攻略'],
    user: {
      id: 102,
      name: '摄影达人',
      avatar: '/static/avatar3.jpg'
    }
  },
  {
    id: 3,
    title: '成都美食地图｜本地人推荐必吃清单',
    cover: '/static/note2.jpg',
    likes: 289,
    comments: 42,
    date: '03-12',
    tags: ['攻略', '美食'],
    user: {
      id: 103,
      name: '美食探索家',
      avatar: '/static/avatar4.jpg'
    }
  },
  {
    id: 4,
    title: '上海迪士尼全攻略｜一天玩遍所有项目',
    cover: '/static/note3.jpg',
    likes: 512,
    comments: 78,
    date: '03-10',
    tags: ['亲子', '攻略'],
    user: {
      id: 104,
      name: '快乐旅行家',
      avatar: '/static/avatar5.jpg'
    }
  }
])

// 生命周期
onMounted(() => {
  calcScrollHeight()
})

onLoad(() => {
  uni.setNavigationBarTitle({ title: '游记社区' })
})

// 方法定义
const calcScrollHeight = () => {
  const systemInfo = uni.getSystemInfoSync()
  // 更精确计算高度：减去状态栏、导航栏、标签栏和底部安全区域
  const navBarHeight = 44 // 导航栏高度
  const tabBarHeight = 50 // 标签栏高度
  const statusBarHeight = systemInfo.statusBarHeight || 20
  const safeAreaBottom = systemInfo.safeAreaInsets?.bottom || 0
  
  scrollHeight.value = `${systemInfo.windowHeight - navBarHeight - tabBarHeight - statusBarHeight - safeAreaBottom}px`
}

const changeTag = (index) => {
  activeTag.value = index
  loadingStatus.value = 'loading'
  setTimeout(() => {
    loadingStatus.value = 'more'
  }, 500)
}

const loadMore = () => {
  if (loadingStatus.value !== 'more') return
  loadingStatus.value = 'loading'
  setTimeout(() => {
    // 模拟加载更多数据
    const newNotes = [...Array(3)].map((_, i) => ({
      id: notesList.value.length + i + 1,
      title: `新加载的游记标题 ${i + 1}`,
      cover: `/static/note${(i % 3) + 1}.jpg`,
      likes: Math.floor(Math.random() * 500),
      comments: Math.floor(Math.random() * 100),
      date: '03-' + (10 + i),
      tags: ['摄影', '攻略', '亲子'].slice(0, Math.floor(Math.random() * 2) + 1),
      user: {
        id: 200 + i,
        name: ['用户A', '用户B', '用户C'][i],
        avatar: `/static/avatar${(i % 3) + 3}.jpg`
      }
    }))
    notesList.value = [...notesList.value, ...newNotes]
    loadingStatus.value = 'more'
  }, 1000)
}

const viewDetail = (id) => {
  uni.navigateTo({ url: `/pages/notes/detail?id=${id}` })
}

const startPublish = () => {
  uni.navigateTo({ url: '/pages/notes/publish' })
}

const goSearch = () => {
  uni.navigateTo({ url: '/pages/search/notes' })
}

// 返回首页方法
const goBack = () => {
  uni.navigateTo({ url: '/pages/home/home' })
}

const getTagColor = (tag) => {
  const colorMap = {
    '摄影': '#e6f7ff',
    '攻略': '#f6ffed',
    '亲子': '#fff2e8',
    '穷游': '#fff0f6',
    '美食': '#f0f5ff'
  }
  return colorMap[tag] || '#f8f8f8'
}

const getTagTextColor = (tag) => {
  const colorMap = {
    '摄影': '#1890ff',
    '攻略': '#52c41a',
    '亲子': '#fa8c16',
    '穷游': '#eb2f96',
    '美食': '#1a8cff'
  }
  return colorMap[tag] || '#666'
}
</script>

<style lang="scss">
.notes-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f5f7fa;
  box-sizing: border-box;
  
  .nav-bar {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    background-color: #fff;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 1px 6px rgba(0,0,0,0.05);
    
    .back-btn {
      width: 40px;
      height: 40px;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-right: 10px;
      border-radius: 20px;
      background-color: #f8f9fa;
      
      &:active {
        background-color: #e9ecef;
      }
    }
    
    .search-bar {
      flex: 1;
      display: flex;
      align-items: center;
      background-color: #f5f5f5;
      border-radius: 18px;
      padding: 8px 15px;
      margin-right: 10px;
      
      .placeholder {
        font-size: 14px;
        color: #999;
        margin-left: 8px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
    
    .publish-btn {
      width: 40px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
  
  .tag-scroll {
    white-space: nowrap;
    padding: 10px 15px;
    background-color: #fff;
    border-bottom: 1px solid #f0f0f0;
    position: sticky;
    top: 64px; /* 导航栏高度 */
    z-index: 99;
    
    .tag-item {
      display: inline-block;
      margin-right: 20px;
      position: relative;
      
      text {
        font-size: 14px;
        color: #666;
        display: inline-block;
        padding: 4px 0;
      }
      
      &.active text {
        color: #1a8cff;
        font-weight: bold;
      }
      
      .indicator {
        position: absolute;
        bottom: -6px;
        left: 50%;
        transform: translateX(-50%);
        width: 16px;
        height: 3px;
        background-color: #1a8cff;
        border-radius: 3px;
      }
    }
  }
  
  .notes-scroll {
    padding: 12px;
    box-sizing: border-box;
    
    .pinned-section {
      margin-bottom: 16px;
      
      .section-header {
        display: flex;
        align-items: center;
        margin-bottom: 10px;
        padding-left: 4px;
        
        .section-title {
          font-size: 15px;
          font-weight: bold;
          color: #ff4d4f;
          margin-left: 6px;
        }
      }
      
      .pinned-list {
        background-color: #fff;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 2px 12px rgba(0,0,0,0.05);
        
        .pinned-item {
          position: relative;
          
          .cover {
            width: 100%;
            height: 180px;
            display: block;
          }
          
          .pinned-content {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 15px;
            background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
            
            .title {
              display: block;
              font-size: 16px;
              font-weight: bold;
              color: #fff;
              margin-bottom: 8px;
              text-shadow: 0 1px 2px rgba(0,0,0,0.3);
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
            }
            
            .meta {
              display: flex;
              align-items: center;
              
              .avatar {
                width: 24px;
                height: 24px;
                border-radius: 12px;
                margin-right: 8px;
                border: 1px solid rgba(255,255,255,0.3);
              }
              
              .name {
                font-size: 12px;
                color: rgba(255,255,255,0.9);
                margin-right: 15px;
                max-width: 100px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
              
              .view-count {
                font-size: 12px;
                color: rgba(255,255,255,0.7);
              }
            }
          }
        }
      }
    }
    
    .waterfall {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      
      .note-item {
        background-color: #fff;
        border-radius: 8px;
        overflow: hidden;
        margin-bottom: 12px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.05);
        width: 48%;
        box-sizing: border-box;
        
        &:nth-child(3n+1) {
          width: 100%;
        }
        
        .cover {
          width: 100%;
          height: 0;
          padding-bottom: 75%;
          display: block;
        }
        
        .note-content {
          padding: 10px;
          
          .title {
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            font-size: 14px;
            color: #333;
            line-height: 1.4;
            height: 40px;
            margin-bottom: 6px;
          }
          
          .stats {
            display: flex;
            margin: 6px 0;
            
            .stat-item {
              display: flex;
              align-items: center;
              margin-right: 12px;
              
              text {
                font-size: 12px;
                color: #999;
                margin-left: 3px;
              }
            }
          }
          
          .user-info {
            display: flex;
            align-items: center;
            padding-top: 8px;
            border-top: 1px solid #f5f5f5;
            
            .avatar {
              width: 20px;
              height: 20px;
              border-radius: 10px;
              margin-right: 6px;
            }
            
            .name {
              font-size: 12px;
              color: #666;
              margin-right: auto;
              max-width: 60px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
            
            .date {
              font-size: 10px;
              color: #999;
            }
          }
        }
        
        .tag-list {
          display: flex;
          flex-wrap: wrap;
          padding: 0 10px 10px;
          
          .tag {
            font-size: 10px;
            padding: 2px 6px;
            border-radius: 4px;
            margin-right: 6px;
            margin-bottom: 6px;
            white-space: nowrap;
          }
        }
      }
    }
  }
  
  .float-btn {
    position: absolute;
    right: 20px;
    bottom: 80px;
    width: 50px;
    height: 50px;
    border-radius: 25px;
    background-color: #1a8cff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(26,140,255,0.3);
    z-index: 100;
  }
}
</style>